<template>
  <div class="word">

    <Head />
    <div class="search">
      <p>{{ con.name }}</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="con">
      <div class="page-bar left">
        <ul>
          <li v-if="list_in != stop">
            <a @click="before()" style="padding-left: 30%"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li v-for="(item, index) in show_list" v-bind:class="{ active: list_in == index }" :key="index">
            <a @click="select(index)" style="diplay: block">
              <p>{{ item.title }}</p>
              <p class="size">
                <span>条目{{ item.unit_total }}</span>- <span>已学{{ item.unit_work_total }}</span>
              </p>
            </a>
          </li>
          <li v-if="start != list_in">
            <a @click="next()" style="padding-left: 30%"><img src="../assets/xiangxia.png" /></a>
          </li>
          <!-- @click="xia()" id="xia" -->
          <li v-else>
            <a class="banclick"><img src="../assets/xiangxia.png" /></a>
          </li>
        </ul>
      </div>

      <!-- <div class="left">
        <p class="btn"><img src="../assets/xiangshang.png" /></p>
        <div class="list" v-for="(item, index) in list" :key="index">
          <p>{{ item.title }}</p>
          <p class="size">
            <span>{{ item.entry }}</span
            >- <span>{{ item.yet }}</span
            >|
            <span>{{ item.error }}</span>
          </p>
        </div>
        <p class="btn"><img src="../assets/xiangxia.png" /></p>
      </div> -->
      <div class="right">
        <!-- <div v-show="cur == 0">111111</div>
        <div v-show="cur == 1">22222</div> -->
        <div class="top">
          <p class="title">{{ con.title }}</p>
          <p class="ying">
            <span>{{ con.English }}</span>
            <span>{{ con.American }}</span>
          </p>
          <p class="yi">{{ con.desc }}</p>
          <p class="imgri">
            <img src="../assets/shangyige.png" @click="lastt()" />
            <img src="../assets/xiayige.png" @click="nextt()" />
          </p>
        </div>
        <audio id="audio" src="http://en.test.1demo.cc/uploads/music/60a4d518ccaa8.mp3" controls="controls"></audio>
        <div class="btn">
          <button @click="audio()">点击播放</button>
          <button @click="biao()">点击标记</button>
          <button @click="audio()">点击重读</button>
        </div>
        <div class="bot">
          <!-- <p v-for="(item, index) in li" :key="index">{{ item.text }}</p> -->
          <p>{{ con.example }}</p>
          <p>{{ con.translate }}</p>
          <p>{{ con.else }}</p>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
  import axios from "axios";
  import Head from "@/components/Head.vue";
  import Footer from "@/components/Footer.vue";

  import {
    clause
  } from '@/api'
  export default {
    name: "Word",
    components: {
      Head,
      Footer,
    },
    data() {
      return {
        all: 5, //总页数
        cur: 0, //当前页码
        totalPage: 1, //当前条数
        list: [
          //   { title: "第一章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第二章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第三章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第四章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第五章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第六章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第七章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第八章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第九章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第十章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第十一章节", entry: "条目47", yet: "已学0", error: "错误2" },
          //   { title: "第十二章节", entry: "条目47", yet: "已学0", error: "错误2" },
        ],
        show_list: [],
        list_in: 0,
        start: 12,
        stop: 0,
        con: {},
        zonglis: [],
        indexs: 0,
        // 课程id
        course_id: "",
        //年级id
        grade_id: "",
        //类型id
        mold_id: "",
        //单元id
        unit_id: "1",
      };
    },
    created() {
      this.course_id = this.$route.query.course_id;
      this.grade_id = this.$route.query.grade_id;
      this.mold_id = this.$route.query.mold_id;
      // console.log(this.$route.query,'options')
      this.dataListFn();
      this.Wordread();
    },
    methods: {
      biao() {
        let a = this.con.id;
        console.log(a);
        clause(a).then((response) => {
          console.log(response);
        })

        // axios.get("/api/index/sign", { params: { id: a } }).then((res) => {
        //   console.log(res);
        // });
      },
      Wordread() {
        let that = this;
        // console.log('123456789')
        axios.interceptors.request.use(
          (config) => {
            config.headers["token"] = localStorage.getItem("token");
            return config;
          },
          (error) => {
            // 请求报错时的操作
            // // console.log(error) // for debug
            return Promise.reject(error);
          }
        );

        axios
          .get("/api/GroupRead/index", {
            params: {
              grade_id: this.grade_id,
              unit_id: this.unit_id
            },
          })
          .then((res) => {
            // that.list = res.data.data.jincheng.data.arr;
            // console.log(res.data.data, "111");
            // this.zonglis = res.data.data;

            that.con = res.data.data.neirong.data[0];
            // console.log(that.con, "111");
            this.zonglis = res.data.data.neirong.data;
            console.log(this.zonglis, "eawsredgfchb");
          });

        // axios.get("/api/Wordread/index").then((res) => {
        //   that.con = res.data.data.neirong[0];
        //   console.log(res.data.data, "111");
        //   this.zonglis = res.data.data;
        // });
      },
      //请求数据
      dataListFn(index) {
        this.dellist();
        // console.log(this.show_list);
        let that = this;
        console.log(index);
        console.log(this.grade_id, "this.grade_id");
        console.log(this.mold_id, "this.mold_id");
        console.log(this.course_id, "this.course_id");
        axios.interceptors.request.use(
          (config) => {
            config.headers["token"] = localStorage.getItem("token");
            return config;
          },
          (error) => {
            // 请求报错时的操作
            // // console.log(error) // for debug
            return Promise.reject(error);
          }
        );
        axios
          .get("/api/unit/index", {
            params: {
              grade_id: this.grade_id,
              mold_id: this.mold_id,
              course_id: this.course_id,
            },
          })
          .then((res) => {
            // that.list = res.data.data.jincheng.arr;
            that.list = res.data.data.danyuanjincheng.arr;
            console.log(that.list, "133");
            // this.zonglis = res.data.data;
            this.dellist();
          });
      },
      tiao() {
        let that = this;
        axios.interceptors.request.use(
          (config) => {
            config.headers["token"] = localStorage.getItem("token");
            return config;
          },
          (error) => {
            // 请求报错时的操作
            // // console.log(error) // for debug
            return Promise.reject(error);
          }
        );
        axios
          .get("/api/unit/index", {
            params: {
              grade_id: this.grade_id,
              mold_id: this.mold_id,
              course_id: this.course_id,
            },
          })
          .then((res) => {
            that.list = res.data.data.jincheng.data.total;
            console.log(res, "112");
          });
      },
      //分页
      select(index) {
        this.list_in = index;
        this.unit_id = this.list_in + 1;
        // console.log(this.list_in,'in')
        // console.log(this.unit_id,'this.unit_id')
        this.Wordread();
      },
      dellist(index, stop) {
        let arr = this.list;
        this.show_list = arr.slice(index || 0, stop || 6);
        console.log(this.show_list);
      },
      next() {
        this.list_in += 1;
        if (this.list_in == 6) {
          this.dellist(6, 12);
          this.list_in = 0;
          this.start = 5;
          this.stop = 12;
        }
        this.unit_id = this.list_in + 1;
        console.log(this.unit_id, "list_in");
        this.Wordread();
      },
      before() {
        this.list_in -= 1;
        if (this.start == 5 && this.list_in == -1) {
          this.dellist(0, 6);
          this.list_in = 5;
          this.start = 12;
          this.stop = 0;
        }
        this.unit_id = this.list_in + 1;
        // console.log(this.unit_id,'list_in')
        this.Wordread();
      },
      lastt() {
        let that = this;
        console.log(this.zonglis, 222);
        let inde = this.indexs - 1;
        console.log(inde);
        this.con = this.zonglis.neirong[inde];
        this.indexs = inde;
      },
      nextt() {
        let that = this;
        console.log(this.zonglis, 222);
        let inde = this.indexs + 1;
        console.log(inde);
        this.con = this.zonglis[inde];
        this.indexs = inde;
      },
      // btnClick: function (data) {
      //   //页码点击事件
      //   if (data != this.cur) {
      //     this.cur = data;
      //     console.log(this.cur);
      //   }
      //   //根据点击页数请求数据
      //   this.dataListFn(this.cur.toString());
      // },
      // pageClick: function () {
      //   console.log(this.cur);
      //   //根据点击页数请求数据

      //   // this.dataListFn(this.cur.toString());
      //   // console.log(this.cur.toString())
      // },
      back() {
        this.$router.push("index");
      },
      audio() {
        document.getElementById("audio").play();
        console.log(111);
      },
      // xia(){
      //   this.list.shift();
      //   document.getElementById('xia').innerHTML=list;
      //   // this.list.push("id+1");
      // },
    },
    watch: {
      list_in() {
        console.log(this.list_in);
      },
    },
    computed: {
      //分页
      // list: function () {
      //   var left = 1;
      //   var right = this.all;
      //   var ar = [];
      //   console.log(this.cur);
      //   if (this.all >= 5) {
      //     if (this.cur > 3 && this.cur < this.all - 2) {
      //       left = this.cur - 2;
      //       right = this.cur + 2;
      //     } else {
      //       if (this.cur <= 3) {
      //         left = 1;
      //         right = 5;
      //       } else {
      //         right = this.all;
      //         left = this.all - 4;
      //       }
      //     }
      //   }
      //   while (left <= right) {
      //     ar.push(left);
      //     left++;
      //   }
      //   return ar;
      // },
    },
    mounted() {
      let that = this;
      axios.interceptors.request.use(
        (config) => {
          config.headers["token"] = localStorage.getItem("token");
          return config;
        },
        (error) => {
          // 请求报错时的操作
          // // console.log(error) // for debug
          return Promise.reject(error);
        }
      );
      axios
        .get("/api/GroupRead/index", {
          params: { grade_id: this.grade_id, unit_id: this.unit_id },
        })
        .then((res) => {
          // that.list = res.data.data.jincheng.data.arr;
          // console.log(res.data.data, "111");
          // this.zonglis = res.data.data;

          that.con = res.data.data.neirong.data[0];
          // console.log(that.con, "111");
          this.zonglis = res.data.data.neirong.data;
          console.log(this.zonglis, "eawsredgfchb");
        });

      // axios.get("/api/Wordread/index").then((res) => {
      //   that.con = res.data.data.neirong[0];
      //   console.log(res.data.data, "111");
      //   this.zonglis = res.data.data;
      // });
    },
    //请求数据
    dataListFn(index) {
      this.dellist();
      // console.log(this.show_list);
      let that = this;
      console.log(index);
      console.log(this.grade_id, "this.grade_id");
      console.log(this.mold_id, "this.mold_id");
      console.log(this.course_id, "this.course_id");
      axios.interceptors.request.use(
        (config) => {
          config.headers["token"] = localStorage.getItem("token");
          return config;
        },
        (error) => {
          // 请求报错时的操作
          // // console.log(error) // for debug
          return Promise.reject(error);
        }
      );
      axios
        .get("/api/unit/index", {
          params: {
            id: 2
          }
        })
        .then((res) => {
          // that.list = res.data.data.jincheng.arr;
          that.list = res.data.data.danyuanjincheng.arr;
          console.log(that.list, "133");
          // this.zonglis = res.data.data;
          this.dellist();
        });
    },
    tiao() {
      let that = this;
      axios.interceptors.request.use(
        (config) => {
          config.headers["token"] = localStorage.getItem("token");
          return config;
        },
        (error) => {
          // 请求报错时的操作
          // // console.log(error) // for debug
          return Promise.reject(error);
        }
      );
      axios
        .get("/api/unit/index", {
          params: {
            grade_id: this.grade_id,
            mold_id: this.mold_id,
            course_id: this.course_id,
          },
        })
      // axios
      //   .get("/api/unit/index")
      //   .then((res) => {
      //     that.show_list = res.data.data.danyuan;
      //     console.log(that.show_list, "111");
      //   })
      //   .catch((err) => console.log(err));
    },
    //分页
    select(index) {
      this.list_in = index;
      this.unit_id = this.list_in + 1;
      // console.log(this.list_in,'in')
      // console.log(this.unit_id,'this.unit_id')
      this.Wordread();
    },
    dellist(index, stop) {
      let arr = this.list;
      this.show_list = arr.slice(index || 0, stop || 6);
      console.log(this.show_list);
    },
    next() {
      this.list_in += 1;
      if (this.list_in == 6) {
        this.dellist(6, 12);
        this.list_in = 0;
        this.start = 5;
        this.stop = 12;
      }
      this.unit_id = this.list_in + 1;
      console.log(this.unit_id, "list_in");
      this.Wordread();
    },
    before() {
      this.list_in -= 1;
      if (this.start == 5 && this.list_in == -1) {
        this.dellist(0, 6);
        this.list_in = 5;
        this.start = 12;
        this.stop = 0;
      }
      this.unit_id = this.list_in + 1;
      // console.log(this.unit_id,'list_in')
      this.Wordread();
    },
    lastt() {
      let that = this;
      console.log(this.zonglis, 222);
      let inde = this.indexs - 1;
      console.log(inde);
      this.con = this.zonglis.neirong[inde];
      this.indexs = inde;
    },
    nextt() {
      let that = this;
      console.log(this.zonglis, 222);
      let inde = this.indexs + 1;
      console.log(inde);
      this.con = this.zonglis[inde];
      this.indexs = inde;
    },
    // btnClick: function (data) {
    //   //页码点击事件
    //   if (data != this.cur) {
    //     this.cur = data;
    //     console.log(this.cur);
    //   }
    //   //根据点击页数请求数据
    //   this.dataListFn(this.cur.toString());
    // },
    // pageClick: function () {
    //   console.log(this.cur);
    //   //根据点击页数请求数据

    //   // this.dataListFn(this.cur.toString());
    //   // console.log(this.cur.toString())
    // },
    back() {
      this.$router.push("index");
    },
    audio() {
      document.getElementById("audio").play();
      console.log(111);
    },
    // xia(){
    //   this.list.shift();
    //   document.getElementById('xia').innerHTML=list;
    //   // this.list.push("id+1");
    // },

  watch: {
    list_in() {
      console.log(this.list_in);
    }
  },
  computed: {
    //分页
    // list: function () {
    //   var left = 1;
    //   var right = this.all;
    //   var ar = [];
    //   console.log(this.cur);
    //   if (this.all >= 5) {
    //     if (this.cur > 3 && this.cur < this.all - 2) {
    //       left = this.cur - 2;
    //       right = this.cur + 2;
    //     } else {
    //       if (this.cur <= 3) {
    //         left = 1;
    //         right = 5;
    //       } else {
    //         right = this.all;
    //         left = this.all - 4;
    //       }
    //     }
    //   }
    //   while (left <= right) {
    //     ar.push(left);
    //     left++;
    //   }
    //   return ar;
    // },
  },
  mounted() {
    let that = this;
    axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
    axios.get("/api/SentRead/index", { params: { id: 2 } }).then((res) => {
      that.con = res.data.data.neirong[0];
      // console.log(that.con[0], "111");
    });
    // axios
    //   .get("/api/unit/index")
    //   .then((res) => {
    //     that.show_list = res.data.data.danyuan;
    //     console.log(that.show_list, "111");
    //   })
    //   .catch((err) => console.log(err));
  },
};
</script>

<style lang="scss" scoped>
  #audio {
    display: none;
  }

  /*分页*/
  .page-bar {
    margin: 40px auto;
    margin-top: 150px;

    .size {
      margin-bottom: 1rem;
    }
  }

  ul,
  li {
    margin: 0px;
    padding: 0px;
  }

  li {
    list-style: none;
  }

  .page-bar li:first-child>a {
    margin-left: 0px;
  }

  .page-bar a {
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 2rem;
    color: #fff;
    cursor: pointer;
    width: 100%;
    // margin-right: 20px;
  }

  .page-bar a:hover {
    // background-color: #eee;
    color: #05d380;
  }

  .page-bar a.banclick {
    cursor: not-allowed;
    padding-left: 30%;
  }

  // .page-bar a.banclick img {
  //   width: 80%;
  // }
  .page-bar .active a {
    color: #fff;
    cursor: default;
    color: #05d380;
  }

  .page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
  }

  .word {
    width: 100%;

    .search {
      width: 98%;
      padding: 0 1%;
      height: 40px;
      line-height: 40px;
      background-color: #3571ff;
      color: #fff;
      display: flex;
      justify-content: space-between;
      padding-bottom: 3px;

      .wen {
        width: 24%;
        position: relative;

        input {
          width: 100%;
          background: #ffffff;
          border-radius: 24px;
          border: 1px solid #fff;
          height: 28px;
          line-height: 28px;
          text-indent: 2.4em;
        }

        .pos {
          position: absolute;
          left: 6px;
          top: 13px;
          width: 4.5%;
        }
      }

      >img {
        width: 1%;
        height: 22px;
        margin-top: 8px;
      }
    }

    .con {
      width: 99%;
      margin-left: 1%;
      display: flex;
      justify-content: space-between;

      .left {
        width: 14%;
        background-color: #000;
        opacity: 0.7;
        color: #fff;
        margin-top: 0.6rem;

        .btn {
          img {
            width: 12%;
            // margin-left: 44%;
            margin: 1rem 44% 1rem;
          }
        }

        .list {
          margin: 2rem 0;
          margin-left: 20%;

          .size {
            font-size: 14px;
          }
        }
      }

      .right {
        width: 88%;
        // margin: 0 auto;
        background-color: #f5f5f5;
        padding-bottom: 6.4rem;

        .top {
          width: 92%;
          margin-left: 2%;
          padding-top: 3rem;
          overflow: hidden;
          background-color: #fff;
          padding-left: 3%;
          padding-bottom: 1rem;

          .title {
            font-size: 60px;
          }

          .ying {
            margin: 1.4rem 0;
          }

          .imgri {
            float: right;
            width: 10%;
            margin-top: 6rem;
            cursor: pointer;

            img:nth-child(2) {
              padding-left: 20%;
            }
          }
        }

        .btn {
          width: 80%;
          margin: 2rem 6% 2rem;
          justify-content: space-between;
          display: flex;

          button {
            width: 28%;
            line-height: 50px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 5px;
            font-size: 18px;
            outline: none;
            cursor: pointer;
          }

          button:nth-child(1) {
            background-color: #05d380;
          }

          button:nth-child(2) {
            background-color: #8556ec;
          }

          button:nth-child(3) {
            background-color: #f1cd51;
          }
        }

        .bot {
          width: 92%;
          margin-left: 2%;
          padding: 1rem 0;
          background-color: #fff;
          padding-left: 3%;

          p {
            line-height: 2rem;
          }
        }
      }
    }
  }

</style>
